<template>
	<view class="fun-flex-col page">
		<view class="fun-flex-col group">
			<view class="fun-flex-col">
				<text class="fun-self-start font">Your email address</text>
				<view class="fun-flex-col fun-justify-start fun-items-start fun-self-stretch text-wrapper">
					<!-- <input class="font_2 text_3 email-input" placeholder="Enter Your email address" type='text'/> -->
					{{oldEmail}}
				</view>
			
				<text class="fun-self-start font text_4">Verification Code</text>
				<view class="fun-flex-col fun-justify-start fun-items-start fun-self-stretch section_3">
					<view class="fun-flex-row fun-justify-between fun-items-end text-wrapper_2">
						<input class="font_2 email-input" v-model="postData.oldVerificationCode" placeholder="Enter Verification Code" type='tel'/>
						<text class="send" @click="sendOld('oldEmail')">Send</text>
					</view>
				</view>
				
				<text class="fun-self-start font_4 text_5">A verification code has been sent to your bound email address.</text>
				<view class="fun-flex-col fun-items-start fun-self-stretch group_2">
					<text class="font">Your new email address</text>
					<input class="fun-mt-16 font_2 email-input" v-model="postData.email" placeholder="Enter Your email address" type='text'/>
				</view>
				<text class="fun-self-start font text_6">Verification Code</text>
				<view class="fun-flex-col fun-justify-start fun-items-start fun-self-stretch section_3">
					<view class="fun-flex-row fun-justify-between fun-items-end text-wrapper_2">
						<input class="font_2 email-input" v-model="postData.verificationCode" placeholder="Enter Verification Code" type='tel'/>
						<text class="send" @click="sendNew('email')">Send</text>
					</view>
				</view>
				<text class="font_4 text_7">A verification code has been sent to your bound email address.</text>
			</view>
			<view class="fun-mt-48 text-wrapper_3" @click="confirm">Confirm</view>
		</view>
	</view>
</template>

<script>
	import {captchaEmail,changeEmail} from "@/api/common.js"
	export default {
		data() {
			return {
				postData:{
					oldVerificationId:"",
					oldVerificationCode:"",
					email:"",
					verificationId:'',
					verificationCode:""
				},
				oldEmail:""
			};
		},
		onLoad(option) {
			this.oldEmail = decodeURIComponent(option?.email);
		},
		methods: {
			sendOld(){
				if(!this.oldEmail){
					this.UTILS.logStr("Enter Your email address")
					return
				}
				this.submitSend(this.oldEmail,"old")
			},
			sendNew(){
				if(!this.postData.email){
					this.UTILS.logStr("Enter Your New email address")
					return
				}
				this.submitSend(this.postData.email,"new")
			},
			submitSend(email,type){
				const params = {
					type:2,
					email:email
				}
				captchaEmail(params).then(res => {
					if(res.code == 0){
						if(type == "old"){
							this.postData.oldVerificationId = res.data?.verificationId || "";
						}else if(type == "new"){
							this.postData.verificationId = res.data?.verificationId || "";
						}
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
				
			},
			
			confirm(){
				changeEmail(this.postData).then(res => {
					if(res.code == 0){
						uni.navigateTo({url:`/url:'/pages/login/success?tips=Your bound email address has changed&btnText=DONE&backUrl=/pages/more/setting',`})
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}

	.page {
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		padding: 32rpx 32rpx 0 32rpx;
		.group {
			.font {
				font-size: 32rpx;
				font-family: SF Pro Display;
				letter-spacing: -0.32rpx;
				color: #3e3e3e;
			}

			.text-wrapper {
				margin-top: 32rpx;
				padding: 28rpx 0 20rpx;
				background-color: #ffffff;
				border-bottom: solid 2rpx #1a7b99;
			}

			.text_4 {
				margin-top: 40rpx;
			}

			.section_3 {
				margin-top: 32rpx;
				padding-top: 10rpx;
				background-color: #ffffff;
				border-bottom: solid 2rpx #d9d9d9;

				.text-wrapper_2 {
					width: 100%;
					input{
						padding: 24rpx 0;
						flex: 1;
					}
					.send {
						padding: 20rpx 44rpx;
						font-size: 28rpx;
						font-family: SF Pro Display;
						font-weight: 700;
						color: #ffffff;
						background-color: #1a7b99;
						border-radius: 10rpx;
					}
				}
			}

			.font_4 {
				font-size: 24rpx;
				font-family: SF Pro Display;
				color: #b0b0bf;
			}

			.text_5 {
				margin-top: 28rpx;
			}

			.group_2 {
				margin-top: 36rpx;
				padding: 4rpx 0 24rpx;
				border-bottom: solid 2rpx #d9d9d9;
			}

			.font_2 {
				font-size: 32rpx;
				font-family: SF Pro Display;
				letter-spacing: -0.32rpx;
				color: #121212;
			}

			.text_6 {
				margin-top: 40rpx;
			}

			.text_7 {
				margin-top: 28rpx;
			}

			.text-wrapper_3 {
				padding: 24rpx 0;
				background-color: #1a7b99;
				border-radius: 8rpx;
				color: #ffffff;
				font-weight: 700;
				letter-spacing: unset;
				text-align: center;
			}
		}
	}
	.email-input{
		flex: 1;
	}
</style>